$kaskade-green: #00af87;
$kaskade-orchid: #af5fd7;
$kaskade-orchid-dark: #5b4666;

Header {
   height: 6;
   layout: horizontal;
   dock: top;
   background: $surface;
}

KaskadeBanner {
    width: 36;
    margin: 0 0 0 1;
}

ConsumerShortcuts {
    width: 38;
    dock: right;
    margin: 1 1 0 0;
}

AdminShortcuts {
    width: 40;
    dock: right;
    margin: 1 1 0 0;
}

DataTable {
    border: solid $kaskade-green 50%;
    height: 100%;

    scrollbar-color: $kaskade-orchid 60%;
    scrollbar-color-active: $kaskade-orchid;
    scrollbar-color-hover: $kaskade-orchid 90%;

    scrollbar-background: $kaskade-orchid-dark;
    scrollbar-background-active: $kaskade-orchid-dark;
    scrollbar-background-hover: $kaskade-orchid-dark;
    scrollbar-corner-color: $kaskade-orchid-dark;
}

DataTable:focus {
    border: $kaskade-green;
    background-tint: $surface;
}

DataTable > .datatable--header {
    text-style: none;
    background-tint: $surface;
    color: $kaskade-orchid;
}

DataTable > .datatable--header-hover {
    text-style: none;
    background: $surface;
    color: $kaskade-orchid;
}

DataTable > .datatable--hover {
    background: $kaskade-green 30%;
}

DataTable > .datatable--cursor {
    background: $kaskade-green 70%;
    color: $text;
}

DataTable > .datatable--fixed {
    background: $surface;
    color: $text;
}

DataTable > .datatable--even-row {
    background: $kaskade-green 5%;
}

DeleteTopicScreen {
    align: center middle;
}

DeleteTopicScreen > Input {
    width: 60%;
}

FilterTopicsScreen {
    align: center middle;
}

FilterTopicsScreen > Input {
    width: 60%;
}

.-textual-loading-indicator {
    background: $surface;
    color: $kaskade-orchid;
}

CreateTopicScreen {
    align: center middle;
}

CreateTopicScreen > Container {
    border: $kaskade-green;
    width: 60%;
    height: 21;
    background: $surface;
    padding: 0 1 0 1;
}

TopicScreen > ScrollableContainer {
    background: $surface;
    border: $kaskade-green;

    scrollbar-color: $kaskade-orchid 60%;
    scrollbar-color-active: $kaskade-orchid;
    scrollbar-color-hover: $kaskade-orchid 90%;

    scrollbar-background: $kaskade-orchid-dark;
    scrollbar-background-active: $kaskade-orchid-dark;
    scrollbar-background-hover: $kaskade-orchid-dark;
    scrollbar-corner-color: $kaskade-orchid-dark;
}

EditTopicScreen {
    align: center middle;
}

EditTopicScreen > Container {
    border: $kaskade-green;
    width: 60%;
    height: 15;
    background: $surface;
    padding: 0 1 0 1;
}

Input {
    padding: 0 0 0 1;
    border: solid $kaskade-green 50%;
    background-tint: $surface;
}

Input:focus {
    border: $kaskade-green;
    background: $surface;
}

RadioSet {
    border: solid $kaskade-green 50%;
    width: 100%;
    background-tint: $surface;
}

RadioSet:focus {
    border: $kaskade-green;
    background-tint: $surface;
}

RadioSet > RadioButton > .toggle--button {
    background-tint: $surface-lighten-1;
    color: $surface;
}

RadioSet > RadioButton.-selected {
    background-tint: $surface;
}

RadioSet > RadioButton.-selected .toggle--button {
    background-tint: $surface-lighten-2;
}

RadioSet > RadioButton.-on .toggle--button {
    background-tint: $surface-lighten-3;
    color: $kaskade-green;
}

RadioSet > RadioButton:blur:hover > .toggle--label {
    background: $surface;
}

ChunkSizeScreen {
    align: center middle;
}

ChunkSizeScreen > ListView {
    border: $kaskade-green;
    width: 60%;
    height: 6;
    background: $surface;
    padding: 0 1 0 1;
    background-tint: $surface;
}

ChunkSizeScreen > ListView:focus > ListItem.-highlight > Widget {
    background: $kaskade-green 70%;
}

ChunkSizeScreen > ListView > ListItem  {
    background: $surface;
}

FilterRecordScreen {
    align: center middle;
}

FilterRecordScreen > Container {
    border: $kaskade-green;
    width: 60%;
    height: 14;
    background: $surface;
    padding: 0 1 0 1;
}
